<template>
  <div class="min-h-screen w-full bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- Animated background elements -->
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute -inset-[10px] bg-gradient-to-r from-blue-100/50 to-indigo-200/50 blur-3xl animate-pulse-slow"></div>
      <div class="absolute top-0 left-0 w-72 h-72 bg-blue-200/30 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
      <div class="absolute top-0 right-0 w-72 h-72 bg-indigo-200/30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
      <div class="absolute -bottom-8 left-20 w-72 h-72 bg-purple-200/30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
    </div>

    <!-- Danmaku Wall -->
    <DanmakuWall />

    <div class="max-w-md w-full bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl transform transition-all hover:scale-[1.01] duration-300 relative">
      <div class="p-8">
        <div class="text-center">
          <h2 class="text-3xl font-extrabold text-gray-900 tracking-tight">
            注册账号
          </h2>
          <p class="mt-3 text-gray-500 text-sm">
            文档校对系统
          </p>
        </div>
        <form class="mt-8 space-y-6" @submit.prevent="handleRegister">
          <div class="space-y-5">
            <div class="relative">
              <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
              <input
                id="username"
                v-model="form.username"
                name="username"
                type="text"
                required
                class="appearance-none relative block w-full px-3 py-2.5 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm transition-all duration-200"
                placeholder="请输入用户名"
              />
            </div>
            <div class="relative">
              <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
              <input
                id="phone"
                v-model="form.phone"
                name="phone"
                type="tel"
                pattern="[0-9]{11}"
                required
                class="appearance-none relative block w-full px-3 py-2.5 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm transition-all duration-200"
                placeholder="请输入11位手机号"
              />
            </div>
            <div class="relative">
              <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <input
                id="password"
                v-model="form.password"
                name="password"
                type="password"
                required
                minlength="6"
                class="appearance-none relative block w-full px-3 py-2.5 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm transition-all duration-200"
                placeholder="请输入密码（至少6位）"
              />
            </div>
            <div class="relative">
              <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
              <input
                id="confirmPassword"
                v-model="form.confirmPassword"
                name="confirmPassword"
                type="password"
                required
                minlength="6"
                class="appearance-none relative block w-full px-3 py-2.5 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm transition-all duration-200"
                placeholder="请再次输入密码（至少6位）"
              />
            </div>
          </div>

          <div>
            <button
              type="submit"
              class="group relative w-full flex justify-center py-2.5 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
              :disabled="loading"
            >
              <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                <svg
                  v-if="!loading"
                  class="h-5 w-5 text-indigo-300 group-hover:text-indigo-200 transition-colors duration-200"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6z" />
                </svg>
                <svg
                  v-else
                  class="animate-spin h-5 w-5 text-indigo-300"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle
                    class="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    stroke-width="4"
                  ></circle>
                  <path
                    class="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
              </span>
              {{ loading ? '注册中...' : '注册' }}
            </button>
          </div>

          <div class="text-center">
            <router-link 
              to="/login" 
              class="text-sm font-medium text-indigo-600 hover:text-indigo-500 transition-colors duration-200"
            >
              已有账号？点击登录
            </router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DanmakuWall from '../components/DanmakuWall.vue'

const router = useRouter()
const loading = ref(false)
const form = reactive({
  username: '',
  phone: '',
  password: '',
  confirmPassword: ''
})

const handleRegister = async () => {
  // 表单验证
  if (form.password !== form.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  if (form.phone.length !== 11) {
    ElMessage.error('请输入11位手机号')
    return
  }

  if (form.password.length < 6) {
    ElMessage.error('密码长度至少为6位')
    return
  }

  try {
    loading.value = true
    const response = await axios.post('/api/auth/register', {
      username: form.username,
      phone: form.phone,
      password: form.password
    })
    
    // 检查响应状态码和消息
    if (response.data.code === 200) {
      ElMessage.success('注册成功！')
      setTimeout(() => {
        router.push('/login')
      }, 1500) // 延迟1.5秒后跳转，让用户看到成功消息
    } else {
      ElMessage.error(response.data.msg || '注册失败，请重试')
    }
  } catch (error) {
    console.error('Registration failed:', error)
    // 显示后端返回的错误信息
    if (error.response?.data?.msg) {
      ElMessage.error(error.response.data.msg)
    } else {
      ElMessage.error('注册失败，请重试')
    }
  } finally {
    loading.value = false
  }
}
</script>

<style>
@import 'element-plus/dist/index.css';

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.animate-pulse-slow {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style> 